@use '@/styles/gobal.scss' as *;

.goodsCard {
    width: pxToRem(330);
    background: #fff;
    border-radius: pxToRem(20);
    // overflow: hidden;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-right: pxToRem(30);
    // cursor: pointer;

    &:hover {
        transform: translateY(pxToRem(-20));
        cursor: pointer;
    }

    &__image {
        width: 100%;
        // height: 200px;
        aspect-ratio: 1/1;
        // background-color: #f5f5f5;
        // position: relative;
        // overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    &__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;

        svg {
            width: pxToRem(48);
            height: pxToRem(48);
        }
    }

    &__info {
        padding: pxToRem(12);
    }

    &__name {
        font-size: pxToRem(24);
        color: #000;
        margin-bottom: pxToRem(8);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__status {
        color: #333;
        background-color: #b4ddee;
        padding: pxToRem(2) pxToRem(8);
        border-radius: pxToRem(4);
    }

    &__meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__time {
        font-size: pxToRem(18);
        color: #000;
        // background-color: #e6f7ff;
        // color: #1890ff;
    }

    &__category {
        color: #333;
        background-color: #d7d7d7;
        padding: pxToRem(2) pxToRem(8);
        border-radius: pxToRem(4);
    }
}